<template>
  <view class="historical-message-root">
    <view v-if="showQueryInput" class="query-container">
      <view class="search-input">
        <!-- 输入框前边的图标 -->
        <uni-icons class="search-icon" type="search"/>
        <!-- 输入框 -->
        <input v-model="keyword" @change="queryAllMessage" class="inputInnner" placeholder="搜索关键字"/>
        <!-- 确认按钮  -->
        <view @click="getMessageListByKeyword(keyword)" class="verifbtn flexcent">
          搜索
        </view>
      </view>
    </view>
    <view :class="showQueryInput ? ['table-container'] : ['table-container','full']"
          v-show="messageList != null && messageList.length > 0">
      <message-item :message-data="messageItem"
                    v-for="(messageItem, messageIndex) in messageList"
                    :key="messageIndex"></message-item>
    </view>
    <view :class="showQueryInput ? ['table-container'] : ['table-container','full']"
          v-show="messageList == null || messageList.length <= 0">
      <empty></empty>
    </view>
  </view>
</template>

<script>
import messageItem from './messageItem.vue'
import {formtimestamp, friendlyDate} from "@/util/timeUtil";
import {getQueryHeaders, requestGet} from "@/util/means/request";
import {baseMixins} from "@/util/baseMixins";
import empty from "@/components/empty/index.vue";
import {QUERY_MY_MASS_OPINION} from "@/api/myMessage";

export default {
  name: "historicalMessage",
  mixins: [baseMixins],
  components: {
    messageItem,
    empty
  },
  props: {
    showQueryInput: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      inputCustomStyle: {
        margin: 0,
        height: '100%',
      },
      keyword: '',
      messageList: [],
    }
  },
  methods: {

    async getMessageListByKeyword(keyword) {
      let owner = this
      this.loading = true
      requestGet({
        url: QUERY_MY_MASS_OPINION, //仅为示例，并非真实接口地址。
        data: {keyword},
        header: getQueryHeaders(),
      }).then((res) => {
        owner.messageList = res?.length > 0 ? res.map(item => {
          let {messageTime, submitTime} = item
          item.lastTime = friendlyDate(formtimestamp(messageTime || submitTime))
          return item
        }) : []
      });
    },
    queryAllMessage(keyword) {
      if (!keyword || keyword === '') {
        this.getMessageListByKeyword(keyword)
      }
    }
  },
  created() {
    this.getMessageListByKeyword('')
  },
  mounted() {
  }
}
</script>

<style lang='scss' scoped>
.historical-message-root {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .query-container, .table-container {
    width: 100%;
  }

  .query-container {
    height: 110rpx;
    padding: 20rpx 0;
    box-sizing: border-box;

    .search-input {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: $bg-color-white;
      border: 2rpx solid #ABABAB;
      border-radius: 30rpx;
      justify-content: space-between;

      // 输入框前边的图标
      .search-icon {
        opacity: 0.8;
        margin: 0 20rpx;
        font-size: 36rpx !important;
        color: #ababab !important;
      }

      // 输入框
      .inputInnner {
        flex: 1;
        height: 100%;
        font-size: 28rpx;
      }

      // 验证码按钮
      .verifbtn {
        height: 100%;
        background: #D81E06;
        font-size: 28rpx;
        color: #FFF;
        padding: 30rpx;
        border-radius: 30rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;

        view {
          width: 140rpx;
          text-align-last: justify;
        }
      }
    }
  }

  .table-container {
    height: calc(100% - 90rpx);
    overflow: auto;

    &.full {
      height: 100%;
    }
  }
}
</style>
